<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>词云图</title>
    <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
    <script src="./js/echarts-wordcloud.js"></script>
	 <script src="./js/data.js"></script>
</head>
<style>
	.mauto{
		margin: 100px auto;
	}
</style>
<body>
    <div id="main" style="width: 600px;height: 500px; " class="mauto"></div>
	<div id="main0" style="width: 600px;height: 500px; "class="mauto"></div>


    <script >
		function clound1(){
			var mycharts = echarts.init(document.getElementById("main"));
			// 人像的base64编码,image 选取有严格要求不可过大；，否则firefox不兼容  可以用iconfont的图标
			image1= ""
			
			var maskResource = new Image()
			maskResource.src=image1;
			var option ={
			    //设置标题，居中显示
			    title:{
			        text: '词云图',
			        left:'center',
			     },
			    //数据可以点击
			    tooltip:{
			
			    },
			    series:[
			        {
			            maskImage:maskResource,
			            //词的类型
			            type: 'wordCloud',
			            //设置字符大小范围
			            sizeRange:[6,78],
			            rotationRange:[-45,90],
			            textStyle: {
							//生成随机的字体颜色
							color:function () {
							    return 'rgba(' + [
							        Math.round(Math.random() * 160),
							        Math.round(Math.random() * 160),
							        Math.round(Math.random() * 160)
							    ].join(',')+')';
							},
			            }, 
			            data:datalist
			         }
			    ]
			
			};
			//加载图像，将数据放在图像中
			maskResource.onload = function(){
			    mycharts.setOption(option)
			};
		}
		clound1();
        function clound2(){
			var image="";
			console.log("氨基酸国风大赏"+image)
			var myChart = echarts.init(document.getElementById('main0'));
			var maskImage = new Image();
			maskImage.src = image;
			maskImage.onload = function(){
				myChart.setOption( {
					backgroundColor:'#fff',
					tooltip: {
						show: true
					},
					series: [{
						type: 'wordCloud',
						gridSize: 1,
						sizeRange: [12, 55],
						rotationRange: [-45, 0, 45, 90],
						maskImage: maskImage,
						textStyle: {
							color: function() {
								return 'rgb(' +
									Math.round(Math.random() * 255) +
									', ' + Math.round(Math.random() * 255) +
									', ' + Math.round(Math.random() * 255) + ')'
							}
						},
						left: 'center',
						top: 'center',
						right: null,
						bottom: null,
						data: datalist
					}]
				})
			}
		}
		clound2();
    </script>

</body>
</html>
